<template>
  <div class="project-home">
    <top-header></top-header>
    <div v-show="init">
      <detail-top :content="detail.name"></detail-top>

      <div class="other-info">
        <van-grid :column-num="4" :border="false">
          <van-grid-item v-for="(item, key) in otherInfoItem" :key="key" icon="photo-o" text="文字">
            <a href="javascript:;" @click="goto(item)" class="item">
              <img :src="item.img" alt="" />
              <div class="name">{{ item.name }}</div>
            </a>
          </van-grid-item>
        </van-grid>
      </div>
    </div>

    <doc-component-index ref="docIndex"></doc-component-index>
  </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
import Base from "@/utils/base";
import Api from "@/api";
import TopHeader from "@/components/TopHeader.vue";
import { Grid, GridItem, Popup } from "vant";
import DocComponentIndex from "./Components/Doc.vue";
import DetailTop from "@/components/DetailTop.vue";

@Component({
  name: "ProjectHome",
  components: {
    TopHeader,
    DocComponentIndex,
    DetailTop,
    VanGrid: Grid,
    VanGridItem: GridItem,
    VanPopup: Popup
  }
})
export default class ProjectHome extends Base {
  private detail: any = {};
  private projectId = "";
  private otherInfoItem: any[] = [];
  private init = false;

  private created() {
    this.projectId = (this.$route.query.projectId ? this.$route.query.projectId : "").toString();
    if (this.projectId) {
      this.$cPromise.all([this.getProjectDetail()]);
    }
  }

  private async getProjectDetail() {
    const res = await Api.GetProjectDetail(this.projectId);
    if (res && res.code) {
      this.detail = res.data;
      this.initModule();
      this.init = true;
    }
    return res;
  }

  private initModule() {
    this.otherInfoItem = [
      { name: "项目概况", img: require("@/assets/images/p-d-4.png"), to: { name: "ProjectDetail", query: { projectId: this.projectId } } },
      { name: "项目合同", img: require("@/assets/images/p-d-5.png"), to: { name: "ContractList", query: { projectId: this.projectId } } },
      { name: "项目成员", img: require("@/assets/images/p-d-6.png"), to: { name: "ProjectMembers", query: { projectId: this.projectId } } },
      { name: "项目干系人", img: require("@/assets/images/p-d-1.png"), to: { name: "ProjectStakeholder", query: { projectId: this.projectId } } },
      { name: "项目便签", img: require("@/assets/images/p-d-2.png"), to: { name: "ProjectNote", query: { projectId: this.projectId, projectName: encodeURIComponent(this.detail.name) } } },
      { name: "业务清单", img: require("@/assets/images/p-d-3.png"), to: { name: "BusinessList", query: { projectId: this.projectId } } },
      { name: "文档查询", key: "docIndex", img: require("@/assets/images/p-d-7.png"), to: { name: "DocIndex", query: { projectId: this.projectId } } }
    ];
  }

  private showDoc() {
    this.$nextTick(() => {
      (this.$refs as any).docIndex.show();
    });
  }

  private goto(item: any) {
    if (item.key === "docIndex") {
      this.showDoc();
    } else {
      this.$router.push(item.to);
    }
  }
}
</script>

<style lang="less" scoped>
.project-home {
  .other-info {
    font-size: 13px;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 5px 9px 0px rgba(3, 0, 195, 0.05);
    // padding: 13px 19px 20px 19px;
    margin: 10px 10px 33px 10px;
    overflow: hidden;
    .item {
      text-align: center;
      img {
        display: inline-block;
        width: 46px;
        height: 46px;
        // margin-bottom: 5px;
      }
    }
    a {
      color: #596275;
    }
  }
}
</style>
